<template>
	<div class="Convenient">


		<van-row v-for="item in list" :key="item.id">
			<van-col span="6">
				【{{item.name}}】
			</van-col>
			<van-col span="5" v-for="child in item.child" :key="child.id" class="van-ellipsis" @click="getUrl(child.url)">
				{{child.name}}
			</van-col>

		</van-row>
		<div class="lifeServer">
			<div class="left">
				<span>家</span>
				<span>园</span>
				<span>购</span>
				<span>物</span>
				<span>中</span>
				<span>心</span>
			</div>
			<div class="right">
				<div class="list-item" v-for="l in buylist" :key="l.id">
					<span>{{l.title}}</span>
				</div>
				
			</div>
		
		</div>

	</div>

</template>

<script>
	import online from "@/assets/img/online.png"
	import zixun from "@/assets/img/zixun.png"
	export default {
		name: "Convenient",
		components: {

		},
		data() {
			return {
				active: 0,
				online: online,
				zixun: zixun,
				list: [],
				siteType:1,
				buylist:[]
			}
		},
		mounted() {
			this.siteType = this.$localStorage.get("siteType")
		},
		methods: {
			getData(item) {
				this.title = item.name
				this.$api.home.nav({
					type: this.siteType,
					pid: item.id
				}).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.list = res.data
						this.getArticle()
					}
			
				})
			},
			getbuy(item){
				let that = this
				that.$api.home.areaArticleList({
					category_id:item.id,
					site_id:this.$localStorage.get("site_id"),
					limit:10,
					page:1
				}).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						that.buylist = res.data
					}
							
				})
			},
			getArticle() {
				let that = this
				this.list.forEach(item => {
					that.$api.home.articleList({
						category_id:item.url,limit:10,page:1
					}).then(res => {
						// 执行某些操作
						if (res.code == 1) {
							that.$set(item, "child", res.data.data)
						}
			
					})
				})
			
			},
		}


	}
</script>

<style scoped lang="less">
	.Convenient {
		width: 100%;
		// height:8.56rem;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rem 0rem 0rem 0rem rgba(206, 206, 206, 0.29);
		margin: 0.5rem auto;
		padding: 0.88rem 0.78rem;
		.lifeServer {
			display: flex;
			justify-content: space-between;
			padding: 0 1rem;
			.left {
				width:1.81rem;
				height:7.13rem;
				background: rgba(254, 119, 0, 1);
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-right: 1.06rem;
		
				span {
					font-size: 0.81rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}
			}
		
			.right {
				flex: 1;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
		
				.list-item {
					font-size: 0.75rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(95, 95, 95, 1);
					margin-right: 1.06rem;
				}
			}
		}
	}
</style>
<style lang="less">
	.Convenient {
		.van-ellipsis {
			font-size: 0.81rem;
			font-family: PingFang SC;
			font-weight: 500;
		}

		.van-col--5 {
			font-size: 0.75rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(89, 89, 89, 1);


		}

		.van-col--6 {
			font-size: 0.81rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FF6B14;


		}

		.van-row {
			margin-bottom: 1.63rem;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>
